<template>
	<view style="background-color: white;height: 100%;">
		<!-- <uni-section title="开启阴影" subTitle="使用 shadow 属性启用阴影" type="line" style="margin-bottom: 3px;">
					<view class="box-bg">
						<uni-nav-bar shadow left-icon="left" title="个人主页" @clickLeft="back" />
					</view>
		</uni-section> -->
		<view class="status_bar"></view>
		<view class="top-page1">
			<u-icon size="80rpx" name="arrow-left" @click="toBack"></u-icon>
			<image class="image" :src="imageAvatar" mode="aspectFill"></image>
			
			<view class="name">
				<text class="name1">{{name}}</text>

				<view>
					<view class="lo_img" style="height: 40rpx;width: 40rpx;display: inline-block;"><u-icon name="map"></u-icon></view>
					<text class="name2">{{city}}</text>
				</view>
				

				<!-- <textarea name="nishi" id="" cols="30" rows="10"></textarea> -->
		    </view>
			
			<view @click.stop="ch" style="padding-right: 50rpx;">
				<rudon-rowMenuDotDotDot class="clapa" :localdata="options" @change="menuAction($event, '10087')">
					<image class="clapc" src="/static/d7f9fde72e9033393a0eeafa51db68c.png"></image>
				</rudon-rowMenuDotDotDot>
			</view>
			<u-popup :show="showissue" mode="center" :closeable='true' round="20rpx" customStyle="width: 600rpx;height: 600rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="close">
				<view style="padding-top:40rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">问题反馈</view>
				
				<checkbox-group @change="checkboxChange">
				  <view style="padding-top:40rpx;font-size: 25rpx;font-weight: bold;padding-left: 40rpx;">
				    <label for="bad">
				      <checkbox id="bad" value="bad1" />
				      存在不良内容（黄色、血腥暴力等）
				    </label>
				  </view>
				  <view style="padding-top:20rpx;font-size: 25rpx;font-weight: bold;padding-left: 40rpx;">
				    <label for="spurious">
				      <checkbox id="spurious" value="spurious1" />
				      存在虚假内容/欺诈行为
				    </label>
				  </view>
				  <view style="padding-top:20rpx;font-size: 25rpx;font-weight: bold;padding-left: 40rpx;">
				    <label for="harassment">
				      <checkbox id="harassment" value="harassment1" />
				      受到信息骚扰
				    </label>
				  </view>
				  <view style="padding-top:20rpx;font-size: 25rpx;font-weight: bold;padding-left: 40rpx;">
				    <label for="other">
				      <checkbox id="other" value="other1" />
				      其他
				    </label>
				  </view>
				</checkbox-group>
				
				
					<textarea style="padding-top: 20rpx;padding-left: 20rpx;background-color: rgb(242, 242, 242);width: 450rpx;padding-bottom: 20rpx;
					margin-left: 90rpx;margin-top: 10rpx;border-radius: 20rpx;"
					@blur="bindTextAreaBlur" auto-height value="reportContent" />
				
				
				<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;">
				<u-button   color="rgb(253, 189, 154)" style="font-size: 40rpx;color: white;font-weight: bold;" @click="requestissure">提交</u-button>
				
				
				</view>
			</u-popup>
			<u-popup :show="showdetail" mode="center" :closeable='true' round="20rpx" customStyle="width: 600rpx;height: 600rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="closeissure">
				<view style="padding-top:40rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">问题反馈</view>
				<view style="padding-top:80rpx;font-size: 30rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;
				height: 250rpx;padding-left: 40rpx;padding-right: 40rpx;text-align: start;">
					提交成功！我们将在1-3个工作日内处理
					并通过应用内动态消息向您反馈处理结
					果，请耐心等待
				</view>
				
				<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;margin-bottom: 40rpx;">
				<u-button   color="rgb(253, 189, 154)" style="font-size: 40rpx;color: white;font-weight: bold;" @click="closeissure">关闭</u-button>
				</view>
				
				
			</u-popup>


		</view>
		
		<view class="uni-margin-wrap">
					<swiper class="swiper" circular indicator-dots  :interval="interval"
						:duration="duration">
						<swiper-item class="swiper-item"  v-for="i,index in imageSources1">
						            <view>
						                <image :src="i" style="width: 100%;height:750rpx;padding:auto;" mode="aspectFit"></image>

						            </view>
						        </swiper-item>
					
						<!-- <swiper-item>
							<image :src="imageSources1[0]" class="m" mode="aspectFill"></image>
						</swiper-item>
						<swiper-item>
							<image :src="imageSources1[1]" mode="aspectFill"></image>
						</swiper-item>
						<swiper-item>
							<image :src="imageSources1[2]" class="m" mode="aspectFill"></image>
						</swiper-item> -->
					</swiper>
		</view>
		<view class="women_text">
			<text class="title">{{text}}</text>
			<view class="content">{{contentall}}</view>
		</view>

		<!-- 寻搭时间位置 -->
		<view style="width: 690rpx;height:auto;border-radius: 30rpx;background-color: rgb(242, 242, 242);
		margin: 30rpx;">
		    <!-- 上层时间显示 -->
			<view style="padding-top: 30rpx;height: 55rpx;">
				<view style="width: 14%;font-size: 30rpx;font-weight: bold;
				padding-left: 25rpx;display: inline-flex;height: 100%;">时间：</view>
				<view style="display: inline-flex;width: auto;color: #A9A9A9;background-color: white;height: auto;
				text-indent: 15rpx;padding: 0 10rpx 0 0;">
					{{starttime}}
				</view>
			</view>
			<view style="margin-top: 10rpx;">
				<view style="padding-left: 25rpx;display: inline-flex;width: auto;height: 100%;font-weight: bold;font-size: 30rpx;">寻搭数量：</view>
				<view style="display: inline-flex;color: #A9A9A9;background-color: white;justify-content: center;width: auto;height: 100%;padding: 5rpx 10rpx 5rpx 10rpx;">
				    {{number}}人
				</view>
			</view>
			<!-- 下层地点显示 -->
			<view style="padding-top: 20rpx;height: 55rpx;padding-bottom: 10rpx;">
				<view style="width: 14%;font-size: 30rpx;font-weight: bold;
				padding-left: 25rpx;display: inline-flex;height: 100%;">地点：</view>
				<view style="text-indent: 15rpx;display: inline-flex;width: auto;background-color: white;height: auto;color: #A9A9A9;padding: 0 10rpx 5rpx 0;">
					{{location}}
				</view>
			</view>
		</view>
		
		<!-- <view style="display: flex;height: 200rpx;"> -->
		<view style="display: flex;margin:0rpx 20rpx 20rpx 30rpx;flex-wrap: wrap;padding: 10rpx 10rpx 20rpx 20rpx;width:650rpx">
			<u-tag v-for="(textit,index) in textw" :key="index" :text="textit" shape="circle"  :show="showtag" plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
			
		</view>
		
		<!-- </view> --> 
		
		<u-line></u-line>
		
		<view class="time" style="text-align: end;padding-right: 40rpx;">{{time01}}</view>
		
		

		
		<image src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/0db703200e974b248488d7e9714f7e82xuns.png" mode="aspectFill" class="xunda" @click="toChat"></image>
		<u-popup :show="show" mode="center" :closeable='true' round="20rpx" customStyle="width: 400rpx;height: 300rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="close">
			<view style="padding-top:60rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">是否前往聊天界面沟通寻搭细节</view>
			<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;">
			<u-button   color="#ffdf80" style="font-size: 40rpx;color: black;" @click="requestChat">请求聊天</u-button>
			
			</view>
		</u-popup>	
			

		
		
	 </view>
	
  </template>

  <script>
	  import timeFrom from '@/uni_modules/star-community/utils/timeFrom.js'
	 export default {
		 
		data() {
			return {
				options: [
					{
						value: 'update',
						text: '问题反馈'
					}
				],
				textw:['测试','学习','创作','吃美食','好吃的饭'],
				showtag: true,
				findtime:'待定',
				findnum:1,
				findloc:'郑州大学图书馆',
				imageSources1: [],
			    imageAvatar: "",
				text: '有没有人一起吃海底捞？\n',
				name:'顺利顺利',
				label:'郑州大学北校区',
				time01:'16:33',
				contentall:'在线蹲一个饭搭子\n海底捞太贵了想找个人一起吃饭\n我们拼一下在这个世界上，每一个人都是独一无二的存在。我们有着不同的经历、不同的性格和不同的梦想。',
				id: '',
				show: false,
                articleId: '',
				showissue:false,
				showdetail:false,
				reportType:'',
                reportContent:'',
				starttime: '待定',
				number:'1',
				location:'待定',
				city:''

			}
			},
		onLoad(e) {
			console.log(e)
			this.articleId=e.id
			let that= this
		    this.$H.get('articles/selectById', e).then(res=>{
				console.log(res)
			if(res.code==200){
			this.$H.get('/user/'+res.res.userId).then(r=>{
				if(r.code==200){
					that.name=r.data.username
					that.imageAvatar=r.data.avatar
					that.city=r.data.city
				}
				
			})
			that.id=res.res.userId
			that.time01=timeFrom(new Date(res.res.createTime).getTime())
			that.text=res.res.title
			// that.label=res.res.location
			that.contentall=res.res.content
			that.imageSources1=res.res.images
			that.imageSources1 = JSON.parse(that.imageSources1);
			if(res.res.startTime==null){that.starttime="待定"}
			else{that.starttime=res.res.startTime.replace("T", " ")}
			
			that.number=res.res.number
			that.location=res.res.location
			that.textw=res.res.labelList
			}	
			})
					},
		methods: {
			close(){
				this.showissue=false
			},
			toBack(){
				uni.navigateBack()
			},
			checkboxChange(e){
				console.log(e.target.value)
				this.reportType=e.target.value.toString()
			},
			requestissure(){
				
				this.$H.post('report/add?articleId='+this.articleId+'&types='+this.reportType+'&content='+this.reportContent).then(res=>{
				this.showissue=false
				this.showdetail=true	
				})
			},
			closeissure(){
				this.showissue=false
				this.showdetail=false
			},
			menuAction (action, rowId) {
				// 忽略初始化时的传入的空操作
				if (action === '') {
					return
				}
				
				// 打印看参数
				console.log('chengg')
				// console.log(JSON.stringify(rowId))
				
				this.showissue=true
				// 动作
				// ...
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '[动作]'
				// })
			},
			handleItemClick(e){//item点击事件回调
			        console.log(e)//{clickIndex: 18}
			    },
			toChat(){
				this.show = true
			}
			,requestChat(){
				console.log(this.post)
				uni.navigateTo({
					url:'/pages/contact/chat?new=1&username='+this.name+'&title='+this.text+'&content='+this.contentall+'&id='+this.id+'&firstImg='+this.imageSources1[0]+'&type=0'+'&avatar='+this.imageAvatar+'&articleId='+this.articleId
				})
				},
			close(){
				this.show=false
				this.showissue=false
			},
		}
	}
</script>

<style lang="scss" >

	.status_bar {
		        height: var(--status-bar-height);
		        width: 100%;
		    }
    .information{
		display: flex;
		margin: 20rpx 60rpx;
		background-color: gainsboro;
		width: auto;
		padding-left: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.top-page1{
		width: 100%;
		height: 100rpx;
		display: flex;
		padding-top: 40rpx;
		margin-bottom: 20rpx;
		// position: relative;
		
		.image{
			width: 90rpx;
			height: 90rpx;
			border-radius: 80%;
			display: inline-block;
			flex-shrink: 0;
			// position: absolute;
			top: 10rpx;
			left: 20rpx;
		}
		.name{
			width: 500rpx;
			display: inline-block;
			
			margin-left: 50rpx;
			// position: absolute;
			left: 95rpx;
			top: 8rpx;
			.name1{
		
				font-size: 40rpx;
				font-weight: bold;
		
				height: 60rpx;
				display: block;
				color: rgb(79,79,79);
			}
			.name2{
				font-size: 30rpx;
				height: 40rpx;
				display: inline-block;
				color: rgb(79,79,79);
			}
			
				
			}
			.clapa{
				height: 80rpx;
				width: 80rpx;
				display: inline-block;
				// position: absolute;
				left: 500rpx;
				top: 15rpx;
				.clapc{
					height: 80rpx;
					width: 80rpx;
					display: inline-block;
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					
					
				}
				
			}

	}
		

			
		
		
	

	.box-bg {
			background-color: #F5F5F5;
			padding: 5px 0;
			width: 750rpx;
			width: 100%;
		}
		
	 .uni-margin-wrap {

		 padding-top: 30rpx;
		 height: 750rpx;
		 width: 90%;
		 margin: auto;
		
		}
	.swiper {

			height: 750rpx;
			border-radius: 40rpx;
			margin: auto;

		}
	 .swiper-item {
			display: flex;	
			justify-content: center;
			align-items: center;
			display: inline-block;
			height:auto;
			// line-height: 300rpx;
			width: 750rpx;
			border-radius: 40rpx;
			margin: auto;
	
		
		
	}
	.m{
		
		width: 100%;
		height: auto;
		// display: inline-block;
		margin:  auto;
		padding:auto;
	}
	.women_text{
		height: auto;
		padding-top: 30rpx;
		.title{
			font-size: 50rpx;
			font-weight: bolder;
			margin-left: 60rpx;
			margin-right: 60rpx;
			color: rgb(79,79,79);
			
		}
		.content{
			font-size: 30rpx;
			margin-top: 15rpx;
			margin-left: 60rpx;
			margin-right: 60rpx;
			color: rgb(79,79,79);
			line-height: 40rpx;
			white-space:pre-wrap;
		}
	}
	.time{
		margin-left: 60rpx;
		margin-top: 20rpx;
	}

	// .classifi{
	// 	position: relative;
	// 	width: 100%;
	// 	height: 150rpx;
	// 	// background: url('../../static/biglabel.png');
	// }
	.xunda{
		margin-top: 30rpx;
		width: 100%;
		height: 140rpx;
		
	}
</style>
	
	
	 
	 
	 

